import {
  Button,
  Image,
  message,
  Modal,
  notification,
  Space,
  TypographyText
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'

import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { ProTable, ProTableProps, ProTableRef } from '@/components'
import { TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks'
import router from '@/router'
import { bus, optionsToMap } from '@/utils'
import { crowdOptions } from '@/views/river/financeManage/constants'

export default defineComponent({
  name: 'QzyRedeemOrder',
  setup() {
    const id = ref(0)
    const status = ref(0)
    const { showConfirm } = useDialog()
    const visible = ref(false)
    const tableRef = ref({} as ProTableRef)

    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '商品名称',
              field: 'productName',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  style: {
                    width: '200px'
                  }
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            type: 'checkbox',
            width: 50
          },
          {
            title: 'ID',
            field: 'id',
            width: 100
          },
          {
            title: '商品图片',
            field: 'productPictureUrl',
            slots: {
              default: 'img'
            },
            width: 300
          },
          {
            title: '商品名称',
            field: 'productName'
          },
          {
            title: '适合人群',
            field: 'suitableForCroud',
            formatter: ({ cellValue }) => {
              return optionsToMap(crowdOptions)[cellValue]
            }
          },
          {
            title: '匹配规则',
            field: 'matchingRule'
          },
          {
            title: '匹配程度',
            field: 'degreeOfMatching'
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await aiTestSkinApi.getProductList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)
    //刷新
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }
    // 删除
    function handleDelete(row) {
      showConfirm({
        content: '确认删除该商品？',
        onOk: async () => {
          try {
            await aiTestSkinApi.getProductSingleDelete(row.id)
            tableRef.value.refresh()
          } catch {}
        }
      })
    }
    // onMounted(() => {
    //   bus.on('refreshFormationList', () => {
    //     nextTick(() => {
    //       tableRef.value.refresh()
    //     })
    //   })
    // })
    //新增
    function handleAdd() {
      router.push({ name: 'ProductConfigEdit' })
    }
    //编辑
    function handleEdit(row) {
      router.push({ name: 'ProductConfigEdit', query: { id: row.id } })
    }
    //批量删除
    function handleBatchDelete() {
      const selected = tableRef.value.table.getCheckboxRecords().map(v => v.id)
      if (selected.length === 0) {
        return message.warn('请选择至少1条记录')
      }

      const { showConfirm } = useDialog()
      showConfirm({
        content: '确认批量删除？',
        onOk: async () => {
          tableRef.value.refresh(async () => {
            await aiTestSkinApi.getProductDelete(selected)
            notification.success({
              message: '批量删除成功',
              duration: 1.5
            })
          })
        }
      })
    }
    return {
      visible,
      tableRef,
      tableConfig,
      status,
      refresh,
      handleAdd,
      handleDelete,
      handleEdit,
      handleBatchDelete
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            img: ({ row }) => (
              <Image
                style={{ width: '200px', height: '150px' }}
                src={row.productPictureUrl}
              ></Image>
            ),
            toolbarButtons: () => {
              return (
                <Space>
                  <Space>
                    <Button onClick={this.handleAdd} type="primary">
                      新增
                    </Button>
                    <Button type="primary" onClick={this.handleBatchDelete}>
                      批量删除
                    </Button>
                  </Space>
                </Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleEdit(row)}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDelete(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.visible}
          title={'删除'}
          destroyOnClose
          width={325}
        >
          确定删除该商品吗？
        </Modal>
      </div>
    )
  }
})
